<template>
    <div class="course-detail">
        <p class="title">{{ info.title }}</p>
        <div class="video-box" v-if="info.videos">
            <img :src="info.cover">
            <van-icon name="play-circle" @click.stop="playVideo()"/>
        </div>
        <img :src="item" v-for="(item, index) in info.images" :key="index"/>

        <van-popup v-model="visible" closeable class="video-popup" position="bottom" get-container="body" :style="{ height: '94%' }" v-if="visible">
            <div class="main">
                <video ref="video" :src="info.videos" controls></video>
            </div>
        </van-popup>
    </div>
</template>

<script>
	import { Popup } from 'vant'
	export default {
		name: 'course-detail',
		components: {
			'van-popup': Popup
		},
        data() {
			return {
				info: {},
				visible: false,
            }
        },
        created() {
			this.getInfo();
        },
        methods: {
			playVideo() {
				this.visible = true;
				setTimeout(() => {
					this.$refs.video.play();
				}, 2000);
            },
			getInfo() {
				this.$service.common.introduction.info({
                    id: this.$route.query.id
                }).then(res => {
					this.info = res;
					this.info.images = this.info.images.split(',');
                })
            }
        }
	};
</script>

<style lang="scss" scoped>
.course-detail {
    padding: 20px;
    img {
        display: block;
    }
    .title {
        text-align: center;
        color: #221D2C;
        font-size: 36px;
        margin: 20px 0;
        font-weight: 600;
    }
    .video-box {
        width: 100%;
        height: 324px;
        margin-bottom: 20px;
        overflow: hidden;
        position: relative;
        @include flexBox(center, center);
        img {
            width: 100%;
            border-radius: 16px;
        }
        video {
            height: 100%;
        }
        i {
            font-size: 70px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: -30px;
            opacity: 0.4;
            background: #fff;
            border-radius: 50px;
        }
    }
}
.video-popup {
    .main {
        width: 100%;
        height: 100%;
        @include flexBox(center, center);
        video {
            height: 86%;
        }
    }
}
</style>